<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
  <script src="/webjars/jquery/3.4.1/jquery.js" type="text/javascript"></script>
  <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
  <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
  <script src="/webjars/axios/0.19.0/dist/axios.js" type="text/javascript"></script>
</head>
<body>
  <div id="vuebox">
    <div class="container" style="margin-top: 50px">
      <div class="row">
        <div class="col-md-6">
          <form class="form-inline" role="form" style="padding-left: 250px;">
            <div class="form-group" style="padding-left: 20px;">
              <label>用户名:</label>
              <input type="text" class="form-control" v-model="name">
            </div>
            <div class="form-group"  style="padding-left: 20px;">
              <button type="button" class="btn btn-primary" @click="selectEntry(1)">查询</button>
            </div>
          </form>
        </div>
      </div>
      <br/>
      <table class="table table-striped">
        <thead>
        <tr>
          <th>序号</th>
          <th>用户名</th>
          <th>用户类型</th>
          <th>用户状态</th>
          <th>最后修改时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in userList.list">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>
            <span v-if="item.tyepd==1">普通会员</span>
            <span v-if="item.tyepd==2">超级会员</span>
          </td>
          <td>
            <span v-if="item.status==0">已冻结</span>
            <span v-if="item.status==1">正常</span>
           </td>
          <td>{{item.lastmodifytime}}</td>
        </tr>
        <tr>
          <p v-if="userList.list!=undefined && userList.list.length<=0">没有查到数据</p>
        </tr>
        </tbody>
      </table>
      <br/>
      <div class="text-right">
        <ul class="pagination">
          <li v-show="userList.hasPreviousPage">
            <a href="#" @click.stop="selectEntry(userList.prePage)">&laquo;</a>
          </li>
          <li :class="{active:userList.pageNum==i}" v-for="i in userList.navigatepageNums">
            <a href="#" @click.stop="selectEntry(i)">{{i}}</a>
          </li>
          <li v-show="userList.hasNextPage">
            <a href="#" @click.stop="selectEntry(userList.nextPage)">&raquo;</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>
<script type="text/javascript">
        var vm=new Vue({
            el:"#vuebox",
            data:{
                name:"",
                userList:{}
            },
            methods:{
                selectEntry:function (id) {
                    axios.get("/seleUsers",{params:{name:this.name,pageNum:id}}).then(res=>{
                        this.userList=res.data;
                    })
                }
            },
            mounted(){
                this.selectEntry();
            }
    })
</script>